// import React from "react";
import React from "./react";
class ClassComponent extends React.PureComponent{
  constructor(props){
    super(props)
  }
  render(){
    console.log('class render')
    return (<div>
      cls - number: {this.props.num}
    </div>)
  }
}

function FunctionComponent(props){
  return <div>
    fn - number: {props.num}
  </div>
}

let MemoFunctionComponent =React.memo(FunctionComponent)
   class Counter extends React.Component{
    constructor(props){
      super(props)
      this.state = {
        num:0
      }
      this.ref = React.createRef()
    }
    handle = ()=>{
      this.setState({
       num: this.state.num + parseInt(this.ref.current.value)
      })
    }
     
      render(){
        return (
          <div>
            <ClassComponent num={this.state.num}/>
            <MemoFunctionComponent num={this.state.num}/>
            <input  ref ={this.ref}/>
            <button onClick={this.handle}>+</button>
         </div>
        );
      }
  }
  
export default Counter